<template>
	<view>
		<view class='payment-status'>
			<view style="margin-top:  -76rpx;" class="flex-center"
				v-if="order_pay_info.paid || order_pay_info.pay_type == 'offline'">
				<u-icon color="#FC4040" custom-prefix="custom-icon" name="shibai" size="70"></u-icon>
			</view>

			<view v-else>
				<u-icon color="#41CC8B" custom-prefix="custom-icon" name="chenggong" size="70"></u-icon>
			</view>
			<!-- 失败时：订单支付失败 -->
			<view class='status' v-if="order_pay_info.pay_type != 'offline'">
				<!-- {{order_pay_info.paid ? $t(`订单支付成功`):$t(payType ? `订单支付中`:`订单支付失败`)}} -->
				订单支付失败
			</view>
			<view class='status' v-else>订单创建成功</view>
			<view class='wrapper'>
				<view class='item flex-between'>
					<view>订单号</view>
					<view class='itemCom'>123456785653322</view>
				</view>
				<view class='item flex-between'>
					<view>下单时间</view>
					<view class='itemCom'>2024-10-10 10:10:00</view>
				</view>
				<view class='item flex-between'>
					<view>支付方式</view>
					<view class='itemCom'>微信</view>
				</view>
				<view class='item flex-between'>
					<view>支付金额</view>
					<view class='itemCom'>1000.00</view>
				</view>
				<!--失败时加上这个  -->
				<view class='item flex-between' v-if="order_pay_info.paid==0 && order_pay_info.pay_type != 'offline'">
					<view>失败原因</view>
					<view class='itemCom'>未支付</view>
				</view>
			</view>
			<!--失败时： 重新购买 -->
			<view @tap="goOrderDetails" v-if="status==0" style="width: 90%;margin: 0 auto;">
				<u-button type="primary" shape="circle">重新支付</u-button>

			</view>


			<view @tap="goOrderDetails" v-if="order_pay_info.paid==0 && status==2">
				<u-button type="primary">重新支付</u-button>
				<!-- <button class='returnBnt bg-color' hover-class='none'>重新支付</button> -->
			</view>
			<view style="width: 90%;margin: 0 auto;margin-top: 40rpx;" v-else>
				<u-button type="primary" shape="circle" @click="$u.throttle(goIndex, 500)">返回首页</u-button>
			</view>

		</view>

	</view>
</template>

<script>
	// import {
	// 	getOrderDetail,
	// 	orderCoupon
	// } from '@/api/order.js';
	// import {
	// 	openOrderSubscribe
	// } from '@/utils/SubscribeMessage.js';
	import {
		toLogin
	} from '@/utils/login.js';
	// import {
	// 	mapGetters
	// } from "vuex";
	// #ifdef MP
	// import authorize from '@/components/Authorize';
	// #endif
	export default {

		data() {
			return {
				loading: false,
				lotteryLoading: false,
				orderLottery: false,
				orderId: '',
				order_pay_info: {
					paid: 1,
					_status: {}
				},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				status: 0,
				msg: '',
				couponsHidden: true,
				options: {},
				payType: ''
			};
		},
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getOrderPayInfo();
					}
				},
				deep: true
			}
		},
		onLoad(options) {
			this.options = options
			if (!options.order_id) return
			uni.showToast({
				title: '缺少参数无法查看订单支付状态',
				success() {
					uni.navigateBack()
				}
			})
			this.orderId = options.order_id;
			this.status = options.status || 0;
			this.msg = options.msg || '';
			this.payType = options.payType || '';
		},
		onShow() {

		},
		methods: {
			getOrderLottery(status) {
				this.orderLottery = status
				this.lotteryLoading = true
			},
			openTap() {
				this.$set(this, 'couponsHidden', !this.couponsHidden);
			},
			onLoadFun: function() {
				this.getOrderPayInfo();
			},
			/**
			 * 
			 * 支付完成查询支付状态
			 * 
			 */
			getOrderPayInfo: function() {
				let that = this;
				uni.showLoading({
					title: that.$t(`正在加载中`)
				});
				getOrderDetail(that.orderId).then(res => {
					uni.hideLoading();
					that.$set(that, 'order_pay_info', res.data);
					uni.setNavigationBarTitle({
						title: res.data.paid ? that.$t(`支付成功`) : that.$t(`未支付`)
					});
					this.loading = true
				}).catch(err => {
					this.loading = true
					uni.hideLoading();
				});
			},

			/**
			 * 去首页关闭当前所有页面
			 */
			goIndex: function(e) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

			/**
			 * 
			 * 去订单详情页面
			 */
			goOrderDetails: function(e) {
				let that = this;
				// #ifdef MP
				uni.showLoading({
					title: that.$t(`正在加载中`),
				})
				openOrderSubscribe().then(res => {
					uni.hideLoading();
					uni.redirectTo({
						url: '/pages/goods/order_details/index?order_id=' + that.orderId
					});
				}).catch(() => {
					nui.hideLoading();
				});
				// #endif
				// #ifndef MP
				uni.redirectTo({
					url: '/pages/goods/order_details/index?order_id=' + that.orderId
				})
				// #endif
			}

		}
	}
</script>

<style lang="scss">
	.payment-status {
		background-color: #fff;
		margin: 195rpx 30rpx 0 30rpx;
		border-radius: 10rpx;
		padding: 1rpx 0 28rpx 0;
	}


	.payment-status .icons.icon-iconfontguanbi {
		text-shadow: 0px 4px 0px #6c6d6d;
	}

	.payment-status .iconfont.fail {
		text-shadow: 0px 4px 0px #7a7a7a;
	}

	.payment-status .status {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin: 25rpx 0 37rpx 0;
	}

	.payment-status .wrapper {
		border: 1rpx solid #eee;
		margin: 0 30rpx 47rpx 30rpx;
		padding: 35rpx 0;
		border-left: 0;
		border-right: 0;
	}

	.payment-status .wrapper .item {
		font-size: 28rpx;
		color: #282828;
	}

	.payment-status .wrapper .item~.item {
		margin-top: 20rpx;
	}

	.payment-status .wrapper .item .itemCom {
		color: #666;
	}
</style>